<template>
  <div>
    <el-card>
      <!-- 卡片顶部添加品牌按钮 -->
      <el-button type="primary" size="default" icon="plus">添加品牌</el-button>
      <!-- 表格组件：用于展示已有的平台数据 -->
      <!--table   border:设置表格纵向是否有边框 -->
      <!-- table-column   lable：某个列表  width align    -->
      <el-table style="margin: 10px 0px" border>
        <el-table-column
          label="序号"
          width="80px"
          align="center"
        ></el-table-column>
        <el-table-column label="品牌名称" align="center"></el-table-column>
        <el-table-column label="品牌LOGO" align="center"></el-table-column>
        <el-table-column label="品牌操作" align="center"></el-table-column>
      </el-table>
      <!-- 分页器组件 -->
      <!-- pagination   -->
      <!-- 
        v-model:current-page :设置分页器当前代码
        v-model:page-size : 每页显示条目个数
        page-sizes : 设置下拉菜单的数据
        background : 设置分页器按钮的背景颜色
        layout : 设置分页器六个子组件布局调整
      -->
      <el-pagination
        v-model:current-page="pageNo"
        v-model:page-size="limit"
        :page-sizes="[1,3,7,9]"
        :small="false"
        :background="true"
        layout=" prev, pager, next, jumper,->,sizes,total"
        :total="400"
       
      />
      <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>
    </el-card>
  </div>
</template>

<script setup lang="ts">
// 引入组合式API函数ref
import { ref } from 'vue'
// 当前页码
let pageNo = ref<number>(1)
// 每页展示多少条数据
let limit=ref<number>(3)
</script>

<style scoped></style>
